<template>
  <div class="login">
    <div class="login-top">
      <van-icon name="cross" @click="$router.push({name:'Mine'})" />
      <img src="../assets/logo2.png" />
    </div>
    <!-- login-top end -->
    <div class="login-login">
      <van-cell-group>
        <van-field placeholder="请输入手机号" v-model="loginUsername" />
      </van-cell-group>
      <van-cell-group>
        <van-field type="password" placeholder="请输入密码" v-model="loginPassword"></van-field>
        <!-- <van-field placeholder="请输入短信验证码">
          <van-button class="yanzheng" slot="button" size="small" type="default">获取验证码</van-button>
        </van-field>-->
        <van-button class="shouji" round type="info" @click="loginclickHandle">手机登录</van-button>
      </van-cell-group>
    </div>
    <!-- login-login end -->
    <div class="login-bottom">
      <span class="login-span1">
        <b>验证码登录</b>
        <van-icon name="arrow" />
      </span>
      <span class="login-span2" @click="$router.push({name:'Register'})">
        <b>注册</b>
        <van-icon name="arrow" />
      </span>
    </div>
    <!--login-bottom end  -->
    <div class="login-logo">
      <div class="noborder">
        <van-icon name="wechat" />
        <span>微信</span>
      </div>
      <div>
        <van-icon name="friends" />
        <span>QQ</span>
      </div>
      <div>
        <van-icon name="alipay" />
        <span>支付宝</span>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      loginUsername: "",
      loginPassword: ""
    };
  },
  methods: {
    loginclickHandle() {
      if (this.loginUsername && this.loginPassword) {
        axios
          .post("http://192.168.17.95:3000/api/v1/flowerslr/login", {
            username: this.loginUsername,
            password: this.loginPassword
          })
          .then(res => {
            if (res.data.code == "success") {
              let userID = res.data.id;
              let ipn = JSON.parse(res.config.data).username;
              localStorage.setItem("userid", userID);
              localStorage.setItem("ipnum", ipn);
              this.$toast("登录成功");
              localStorage.setItem("token", res.data.token);
              this.$router.push({ name: "Mine" });
            } else if (
              res.data.msg ==
              "the password does not match the username. Please check your password"
            ) {
              this.$toast("密码错误");
              this.loginPassword = "";
            } else if (
              res.data.msg == "User not registered or entered incorrectly"
            ) {
              this.$toast("用户未注册或输入错误");
              this.loginUsername = "";
            }
          });
      } else {
        this.$toast("请输入用户名和密码");
      }
    }
  }
};
</script>
<style scoped>
@import "../css/login.css";
</style>